<template>
	<view>
		<up-navbar title="验证码" :autoBack="true">
		</up-navbar>
		<view class="sign">
			<view class="title">请输入验证码</view>
			<view class="title2">验证码已发送至：{{phone}}</view>
			<view class="phone">
				<up-code-input mode="box" @change="change" @finish="finish" :maxlength="6"></up-code-input>
			</view>
			<view class="Countdown">
				<view v-if="time>0">
					<text style="color: #EF6043;padding-right: 5rpx;"> {{time}} </text>秒后可重新发送验证码
				</view>
				<view v-else>
					<text style="color: #EF6043;padding-right: 5rpx;">已超时</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkSmsCode
	} from '@/request/api.js';
	export default {
		data() {
			return {
				time: 60,
				timeOR: true, //判断有没有过倒计时
				message: '', //当前输入的验证码
				value: 0,
				type: '注册',
				phone: '',
				result: '', //正确的验证码
				range: [{
						value: 0,
						text: "+86"
					},
					{
						value: 1,
						text: "+123"
					},
					{
						value: 2,
						text: "+456"
					},
				],
			};
		},
		onLoad(e) {
			console.log(e);
			//获取传递过来的手机号
			if (e.phone) {
				this.phone = e.phone
			}
			//获取传递过来的验证码
			if (e.result) {
				this.result = e.result
			}
			this.countDown();
		},
		methods: {
			countDown() {
				if (this.time > 0) {
					this.time = this.time - 1;
					setTimeout(this.countDown, 1000);
				} else {
					this.timeOR = false
				}
			},
			finish(e) {
				let that = this
				if (!this.timeOR) {
					uni.showToast({
						title: '已超时',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack(1)
					}, 1500)
					return
				}
				uni.showLoading({
					title: '登录中..',
					mask: true
				})
				checkSmsCode({
					memberPhone: this.phone,
					smsCode: this.message
				}).then(responts => {
					console.log(responts);
					const infos = responts.result;
					if (responts.success) {
						uni.hideLoading();
						// if (responts.result.token != null) {
						// uni.setStorageSync('userInfo', JSON.stringify(infos.memberInfo));
						// uni.setStorageSync('token', infos.token);
						// 	setTimeout(() => {
						// 		uni.switchTab({
						// 			url: '/pages/menu/menu'
						// 		})
						// 	}, 500)

						// } else {
						// 	that.denglumtk = true;
						// 	console.log('dada');
						// }
						uni.setStorageSync('userInfo', JSON.stringify(infos.memberInfo));
						uni.setStorageSync('token', infos.token);
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/menu/menu'
							})
						}, 500)
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '获取用户信息' + responts.message,
							icon: 'none'
						});
					}
				})

			},
			change(e) {
				this.message = e
			}
		}
	}
</script>

<style lang="less">
	.sign {
		padding: 200rpx 20rpx 0 20rpx;

		.Countdown {
			padding-top: 30rpx;
			font-size: 28rpx;
			color: #999999;
		}

		.phone {
			padding-top: 60rpx;
			width: 85%;
		}

		.title {
			font-size: 56rpx;
			font-weight: 700;
		}

		.title2 {
			padding-top: 10rpx;
			font-size: 28rpx;
			color: #A17167;
		}
	}

	.topstart {
		height: var(--status-bar-height);
	}

	.header {
		text-align: center;
		color: #170000;
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}
</style>